<template>
  <section class="padding">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="title-icon">
          <i class="el-icon-phone-outline" />
          4007755990
        </span>
      </div>

      <el-row :gutter="20" class="padding-tb-lg">
        <el-col :span="12">
          <div class="padding-lr-40 info flex flex-direction  justify-center">
            <h2>深圳九方通逊电商物流有限公司</h2>
            <p>
              <span class="title">
                办公地址:
              </span>
              <span>
                深圳市龙岗区吉华街道甘坑社区甘李二路9号金苹果创新园厂房C201
              </span>
            </p>
            <p>
              <span class="title">
                操作中心:
              </span>
              <span>
                深圳市龙华区观澜街道牛湖社区大水田村裕展3路5号
              </span>
            </p>
            <p>
              <span class="title">
                仓库地址:
              </span>
              <span>
                深圳市龙华区观澜街道牛湖社区大水田村裕展3路5号
              </span>
            </p>
            <p>
              <span class="title">广州分公司:</span>
              <span>
                广州市白云区尖彭路397号海瑞商务中心(天瑞广场)A座写字楼10层1012-1016
              </span>
            </p>
            <p>
              <span class="title">邮编:</span>
              <span>518000（寄件请注明对应的销售人员收）</span>
            </p>
            <p>
              <span class="title">电话:</span>
              <span>0755-28314527</span>
            </p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="map">
            <!-- <el-input v-model="addressKeyword" placeholder="请填写地址来直接查找相关位置" /> -->
            <baidu-map
              class="bmView"
              :scroll-wheel-zoom="true"
              :center="location"
              :zoom="zoom"
              ak="6nXme7GcKTyrXYQ27xlR86Sqpcs9aQRZ"
              @ready="handler"
              @click="getLocationPoint"
            >
              <bm-view style="width: 100%; height:500px; flex: 1" />
              <!-- <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none" /> -->
            </baidu-map>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'

export default {
  name: 'ContactUs',
  components: {
    BaiduMap,
    BmView
  },
  data() {
    return {
      BMap: null,
      location: {
        lng: 114.092865,
        lat: 22.633654
      },
      zoom: 18.8,
      addressKeyword: ''
    }
  },
  mounted() {},
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap
      // console.log('%cBMap: ', 'color: MidnightBlue; background: Aquamarine;', BMap)
      const point = new BMap.Point(114.121997, 22.655395)
      map.centerAndZoom(point, 18.8)
      const marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
      const opts = {
        width: 200, // 信息窗口宽度
        height: 70, // 信息窗口高度
        title: '九方通逊', // 信息窗口标题
        message: '九方通逊仓储中心'
      }
      var infoWindow = new BMap.InfoWindow(
        '地址：深圳市龙岗区吉华街道甘坑社区甘李二路9号金苹果创新园厂房C201',
        opts
      ) // 创建信息窗口对象
      map.openInfoWindow(infoWindow, point) // 开启信息窗口
      marker.addEventListener('click', function() {
        map.openInfoWindow(infoWindow, point) // 开启信息窗口
      })
    },
    getLocationPoint(e) {
      // console.log(e)
      this.lng = e.point.lng
      this.lat = e.point.lat
      const BMap = this.BMap
      /* 创建地址解析器的实例 */
      const geoCoder = new BMap.Geocoder()
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng
        this.selectedLat = point.lat
      })
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        // console.log(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.info {
  p {
    font-size: 16px;
    .title {
      display: inline-block;
      font-weight: 700;
      width: 100px;
    }
  }
}
</style>
